<template>
  <div class="login">
    <div class="center">
      <h3 class="title">
        <img src="@/assets/common/login-logo.png" />
      </h3>
      <!-- 登录 -->
      <el-form
        ref="form"
        :model="user"
        label-width="80px"
        v-show="!logORregister"
      >
        <el-form-item class="form_item">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="user.name"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入密码"
            show-password
            class="possword"
            v-model="user.password"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%; margin-bottom: 30px"
            @click="gohome"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 注册 -->
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-show="logORregister"
        class="register"
        :rules="rulesVerification"
      >
        <el-form-item prop="name">
          <el-input v-model="form.name" placeholder="11位手机号"></el-input>
        </el-form-item>
        <el-form-item class="verification" prop="verification">
          <el-input v-model="form.verification" placeholder="请输入验证码">
          </el-input>
          <el-button round class="onVerification" size="medium"
            >获取验证码</el-button
          >
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passwordOk">
          <el-input
            v-model="form.passwordOk"
            show-password
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%; margin-bottom: 30px"
            >下一步</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 底部提示文字 -->
      <div
        data-v-321e43dd=""
        class="regInfo"
        @click="logORregister = !logORregister"
      >
        <a data-v-321e43dd="" class="" v-show="!logORregister"
          >还没有账号？立即注册</a
        >
        <a v-show="logORregister">使用已有账号登录</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import * as api from '@/api/login.js'
export default {
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次密码不一致哦~'))
      }
    }
    return {
      user: {
        name: 13800000002,
        password: '123456'
      },
      form: {
        name: '',
        verification: '',
        password: '',
        passwordOk: ''
      },
      logORregister: false, //登录或者注册
      home: '^1[0-9]{10}$',
      rulesVerification: {
        //注册变得验证
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },

          {
            pattern: '^1[0-9]{10}$',
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        verification: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入6位验证码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请设置新密码', trigger: 'blur' },
          {
            pattern: /^[\w]{6,12}$/,
            message: '请设置6至12位的密码',
            trigger: 'blur'
          }
        ],
        passwordOk: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // console.log(this)
  },
  computed: {
    // ...mapState(["num"]),
  },
  methods: {
    // ...mapMutations(["inAdd"]),
    async gohome() {
      const { data: res } = await api.login(this.user.name, this.user.password)
      // console.log(res)
      if (res.data) {
        sessionStorage.setItem('ihrm', `Bearer ${res.data}`)
        this.$router.push('/home')
        this.$message({
          message: '登录成功',
          type: 'success'
        })
      } else {
        this.$message.error(`${res.message}`)
      }
    }
  }
}
</script>

<style lang='less' scope>
* {
  padding: 0;
  margin: 0;
}
a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(../assets/common/login.jpg) no-repeat;
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 400px;
    transform: translate(-50%, -50%);
    // background: #fff;
    .el-form-item__content {
      margin: 0 !important;
    }
    .el-input__inner {
      height: 50px;
      background: rgba(212, 229, 255);
      color: #68b0fe;
    }
    .el-button--primary {
      height: 50px;
      background: rgba(64, 127, 254);
      border: none;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: #eee;
      margin: 0 auto 40px;
      text-align: center;
      font-weight: 700;
    }

    .regInfo {
      text-align: center;
      color: #fff;
      font-size: 16px;
    }
  }
}

.register {
  .verification {
    position: relative;
    .onVerification {
      position: absolute;
      top: 5px;
      right: 5px;
      color: #68b0fe;
    }
  }
}
</style>